<template>
	<div>
		<header>
			<span @click="backClick"><返回</span>
			<span>当前位置：绩效总览</span>
			<div class="div">
				当前选择：
				<el-select v-model="value" placeholder="请选择" @change="change">
				    <el-option
				      v-for="item in departmentArr"
				      :key="item.id"
				      :label="item.name"
				      :value="item.name"
				      >
				    </el-option>
			  	</el-select>
			</div>
		</header>
		<div class="detail_container" :style="{height: heightClient}">
			<div class="side_choose" >
				<!-- <div class="side_title">
					年度累计值：{{perYearNum}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;同期累计值：{{samePeriod_perYearNum}}
				</div> -->
				<div class="choose_bar">
					<div class="bar" @click="barClick('out')" 
					:class="[
					{active: outShow && type === '绩效'}
					]">
						<div class="bar-title">绩效总额（元）</div>
						<div class="bar-list" :class="{spe: fontover}">
							<span>本月：{{perTotalNum}}</span>
						</div>
						<div class="bar-list" :class="{spe: fontover}">
							<span>同期：{{samePeriod_perTotalNum}}</span>
						</div>
					</div>
					<div class="bar" @click="barClick('average')" :class="[
					{active: averageShow && type === '绩效'}
					]">	
						<div class="bar-title">个人月绩效（元）</div>
						<div class="bar-list" :class="{spe: fontover}">
							<span>本月：{{averPeo}}</span>
						</div>
						<div class="bar-list" :class="{spe: fontover}">
							<span>同期：{{samePeriod_averPeo}}</span>
						</div>
					</div>
					<div class="bar" @click="barClick('use')"  :class="[
					{active: useShow && type === '绩效'}
					]">
						<div class="bar-title">扣罚情况（元）</div>
						<div class="bar-list" :class="{spe: fontover}">
							<span>本月：{{penTotal}}</span>
						</div>
						<div class="bar-list" :class="{spe: fontover}">
							<span>同期：{{samePeriod_penTotal}}</span>
						</div>
					</div>
				</div>
				
				<!-- <div  style="overflow-y: auto; height: calc(100% - 200px);width: calc(100% - 20px); margin: 0 auto;">
					
					
				</div> -->
				<div style="overflow-y: auto; height: calc(100% - 200px);width: calc(100% - 20px); margin: 0 auto;" >
					<img src="./../../assets/lackshort.svg" style="display: block;margin: 0 auto " v-show="departmentNone"> 
					<div ref="list" :style="{height: heightTest}" v-show="!departmentNone"></div>
				</div>
			</div>
			<div class="container_right">
				<div class="right_top">
					<div class="right_title" v-if="outShow">绩效总额趋势</div>
					<div class="right_title" v-if="averageShow">个人月绩效趋势</div>
					<div class="right_title" v-if="useShow">扣罚情况趋势</div>
					<div ref="jixiaoall" style="height: calc(100% - 50px); width: 100%;"></div>
				</div>
				<div class="right_top">
					<div class="right_title">绩效构成</div>
					<div ref="goucheng" style="height: calc(100% - 50px); width: 100%;"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import axios from 'axios'
import echarts from 'echarts'
export default {
	data () {
		return {
			heightTest: '0px',
			type: this.$route.params.type,
			heightClient: '0px',
			menzhenshoushushow: true,
			a: true,
			departmentNone: false,
			menBarTitle1: '',
			fontover: false,
			value: '',
			menBarTitle2: '',
			menBarTitle3: '',
			depId: '',
			penShow: true, //扣罚为空判断
			perTotalNum: "0", //绩效总额
			averPeo: "435", //人均月绩效
			perYearNum: '',//年度累计值
			penTotal: "0", //扣罚情况
			samePeriod_perYearNum: '',//同期累计值
			samePeriod_perTotalNum: "0", //同期绩效总额
			samePeriod_averPeo: "435", //同期人均月绩效
			samePeriod_penTotal: "0", //同期扣罚情况
			personalIds: [],//个人id数组
			outShow: true,
			averageShow: false,
			useShow: false,
			departmentArr: [],
			clickArr: [],//点击数组
			perMonthDep: {},
			options: {
			    tooltip: {
			        trigger: 'axis',
			        enterable:true,
			        // axisPointer: {
			        //     show: false
			        // }
			    },
			    legend: {
			        data: ['本科室发放', '非本科室发放'],
			        itemWidth: 28,
			        itemHeight: 10
			    },
			    grid: {
			        left: '3%',
			        right: '120px',
			        bottom: '3%',
			        top: '30px',
			        containLabel: true
			    },
			    xAxis: [{
			        type: 'value',
			        // boundaryGap: [0, 0.01],
			        show: false
			    },{
			        type: 'value',
			        // boundaryGap: [0, 0.01],
			        show: false
			    }],
			    yAxis: [{
			        type: 'category',
			        data: ['1', '2'],
			        nameGap: '100',
			        // boundaryGap: ['100%', '100%'],
			        axisLine: {
			        	show: false
			        },
			        // axisPointer: {
			        // 	type: 'shadow'
			        // },
			        axisTick: {
			        	show: false,
			        	length: 100
			        },
			        axisLabel: {
			        	interval: 0,
			        }

			    },
			    {

    				type: "category",
			        data: [],
			        nameGap: '100',
			        boundaryGap: true,
			        show: false,
			    }	
			    ],
			    series: [
			        {
			            name: '本科室发放',
			            type: 'bar',
			            stack: '本月',
			            barWidth: 20,
			            data: [30,20],
			            label: {
			            	show: false,
			            	position: 'right',
			            	color: '#9B9B9B'
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#4F97E2'
			            	}
			            },
			            itemStyle: {
			            	normal: {
			            		color: '#78AEE7'
			            	}
			            }
			        },
			        {
			            name: '非本科室发放',
			            type: 'bar',
			            stack: '本月',
			            barWidth: 20,
			            data: [20, 30],
			            // legendHoverLink: false,
			            label: {
			            	show: false,
			            	position: 'right',
			            	color: '#333'
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#ECBE6A'
			            	}
			            },
			            itemStyle: {
			            	normal: {
			            		color: '#ECD06A'
			            	}
			            }
			        },
			        {
			            name: '合计',
			            type: 'bar',
			            stack: '总量',
			            barGap: '-100%',
			            barCategoryGap: '120%',
			            barWidth: 20,
			            data: [20, 30],
			            // legendHoverLink: false,
			            label: {
			            	show: true,
			            	position: 'right',
			            	color: '#333',
			            	formatter: function(params) {
			            		return Number(params.value).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: 'rgba(128, 128, 128, 0)'
			            	}
			            },
			            itemStyle: {
			            	normal: {
			            		color: 'rgba(128, 128, 128, 0)'
			            	}
			            }
			        },
			        {	
			        	xAxisIndex: 1,
						yAxisIndex: 1,
			            type: 'bar',
			            barWidth: 20,
			            data: [],
			            itemStyle: {
							normal: {
							barBorderColor: 'transparent',
							color: 'transparent'
							}
            			}		
			            
			        }
			    ]
			},

			optionsMenRightTop: {
		    tooltip: {
		        trigger: 'axis'
		    },
		    grid: {
		    	top: '15%',
		    	right: '3%',
		    	bottom: '15%',
		    	left: '8%'
		    },
		    legend: {
		        data:[
		        	{
		        		icon: 'circle',
		        		name: '本月'
		        	},
		        	{
		        		icon: 'circle',
		        		name: '同期'
		        	}
		        ],
		        top: '3%'
		    },
		    xAxis: [
		        {
		            type: 'category',
		            data: [],
		            // axisPointer: {
		            //     show: false
		            // },
		            axisTick: {
		            	show: false
		            },
		            axisLine: {
		            	show: false
		            }
		        }
		    ],
		    yAxis: {
	            type: 'value',
	            axisLabel: {
	                formatter: function(value) {
	                	if (parseInt(value) > 1000) {
	                		return parseInt(value)/1000 + 'K'
	                	} else 
	                	return value
	                }
	            },
	            axisTick: {
	            	show: false
	            },
	            axisLine: {
	            	show: false
	            },
	            splitLine: {
	            	lineStyle: {
	            		color: '#E6E6E6',
	            		type: 'dashed'
	            	}
	            }
	        },
		    series: [
		        {
		            name:'本月',
		            type:'bar',
		            barWidth: 21,
		            data:[10,30,40,10],
		            itemStyle: {
		            	normal: {
		            		color: '#78AEE7'
		            	}
		            },
		            emphasis: {
		            	itemStyle: {
		            		color: '#4F97E2'
		            	}
		            }
		        },
		        {
		            name:'同期',
		            type:'line',
		            // yAxisIndex: 1,
		            symbolSize: 10,
		            data:[20,20,31,16],
		            itemStyle: {
		            	normal: {
		            		color: '#FBC05A'
		            	}
		            },
		            emphasis: {
		            	color: '#FBC05A',
		            	symbol: 'circle'
		            }
		        }
		    ]
		  },
		  optionsMenRightBottom: {
		    tooltip: {
		        trigger: 'axis'
		    },
		    grid: {
		    	top: '15%',
		    	right: '3%',
		    	bottom: '15%',
		    	left: '8%'
		    },
		    xAxis: [
		        {
		            type: 'category',
		            data: ['月绩效','药品绩效','手术绩效','耗材节约', '医联体', '教学奖', '优质护理奖'],
		            // axisPointer: {
		            //     show: false
		            // },
		            axisTick: {
		            	show: false
		            },
		            axisLine: {
		            	show: false
		            },
		            axisLabel: {
		            	interval: 0
		            }
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value',
		            axisLabel: {
		                formatter: function(value) {
		                	if (parseInt(value) > 1000) {
		                		return parseInt(value)/1000 + 'K'
		                	} else 
		                	return value
		                }
		            },
		            axisTick: {
		            	show: false
		            },
		            axisLine: {
		            	show: false
		            },
		            splitLine: {
		            	lineStyle: {
		            		color: '#E6E6E6',
		            		type: 'dashed'
		            	}
		            }
		        },
		        {
		            type: 'value',
		            show: false
		        }
		    ],
		    series: [
		        {
		            name:'本月',
		            type:'bar',
		            barWidth: 21,
		            data:[10,30,40,10,23,10,30],
		            itemStyle: {
		            	normal: {
		            		color: '#5CB5CA'
		            	}
		            },
		            label: {
			            	show: true,
			            	position: 'top',
			            	color: '#bbb',
			            	formatter: function(params) {
			            		return Number(params.value).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
			            	}
			          },
		            emphasis: {
		            	itemStyle: {
		            		color: '#72D0D3'
		            	}
		            }
		        }
		    ]
		  } 
		}
	},
	methods: {
		number(data) {
  			if(data != null) {
  				return data.toString().replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
  			} else {
  				return
  			}
  		},
		getDepartment () {
          	var qs = require('qs');
          	var self = this
          	axios.post('/service', 
          		qs.stringify({"data": JSON.stringify({
              		command: 'getDepartment',
              		platform: 'web',
	              	monthTime: self.month
             		})
          		}), {
              		headers: {
               			"BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
              		}
            }).then(function (rep) {
              	if (rep.data.statusCode === '10001') {
              	// console.log(rep.data.data.department)
           		self.departmentArr = rep.data.data.department
           		if(!sessionStorage.getItem('depName')) {
               		sessionStorage.setItem('depName',rep.data.data.department[0].name)
               		self.value = rep.data.data.department[0].name
               } else {
               		self.value = sessionStorage.getItem('depName')
                }
                self.departmentArr.forEach((item) => {
					if (item.name === self.value) {
						self.depId = item.id
					}
				})
           		
				if (self.outShow == true) {
					self.getperDepAnalyse('perTotalNum')
				} else if (self.averageShow == true) {
					self.getperDepAnalyse('averPeo')
				} else {
					self.getperDepAnalyse('penTotal')
				}
          		}
         	}).catch(function (error) {
          		// console.log(error);
         	});
 		},
 		getperDepAnalyse (type) {
 			var qs = require('qs')
 			var self = this
 			var perMonthDep = {}
 			axios.post('/service', 
          		qs.stringify({"data": JSON.stringify({
              		command: 'perDepAnalyse',
              		platform: 'web',
              		monthTime: self.month,
              		depId: self.depId,
              		type: type
             		})
          		}), {
              		headers: {
               			"BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
              		}
            }).then(function (rep) {
              	if (rep.data.statusCode === '10001') {
              		perMonthDep = rep.data.data.perMonthDep
              		self.perYearNum = perMonthDep.thisMonth.perYearNum
              		self.perTotalNum = self.number(Number(perMonthDep.thisMonth.perTotalNum))
              		self.averPeo = self.number(Number(perMonthDep.thisMonth.averPeo))
              		self.penTotal = self.number(Number(perMonthDep.thisMonth.penTotal))
              		self.samePeriod_perYearNum =perMonthDep.samePeriod.perYearNum
              		self.samePeriod_perTotalNum = self.number(Number(perMonthDep.samePeriod.perTotalNum))
              		self.samePeriod_averPeo = self.number(Number(perMonthDep.samePeriod.averPeo))
              		self.samePeriod_penTotal = self.number(Number(perMonthDep.samePeriod.penTotal))
              		self.personalIds = perMonthDep.thisMonth.personalTrend.userIds
              		//科室发放与非本科室发放
              		if (type === 'perTotalNum' || type === 'averPeo') {
              			self.options.series[0].data = perMonthDep.thisMonth.personalTrend.yLocalDepNum
              			self.options.series[1].data = perMonthDep.thisMonth.personalTrend.yNonDepNum
              			self.options.series[2].data = []
              			self.options.series[3].data = []
              			self.departmentNone = false
              			if(perMonthDep.thisMonth.personalTrend.yLocalDepNum.length === 0 && perMonthDep.thisMonth.personalTrend.yNonDepNum.length === 0) {
              				self.departmentNone = true
              			} else {
	              			perMonthDep.thisMonth.personalTrend.yLocalDepNum.forEach((item,index) => {
	              				let sum = parseFloat(perMonthDep.thisMonth.personalTrend.yNonDepNum[index]) + parseFloat(perMonthDep.thisMonth.personalTrend.yLocalDepNum[index])
	              				self.options.series[2].data.push(sum.toFixed(2))
	              			})     
	              			self.options.legend.data = ['本科室发放', '非本科室发放']
	              			self.options.series[0].name = "本科室发放"
	              			self.options.series[1].name = "非本科室发放"
	              			self.options.series[0].label.show = false
	              			self.options.yAxis[0].data = perMonthDep.thisMonth.personalTrend.xData
	              			for ( var i = 0 ; i < self.options.yAxis[0].data.length; i++ ) {
	              				self.options.series[3].data.push(1000)
	              			}
	              			self.heightTest = (parseInt(self.options.yAxis[0].data.length)*45 +150) + 'px'
	              			self.myChart = echarts.init(self.$refs.list)
	              			setTimeout(() => self.myChart.resize(), 0)
	              			self.myChart.clear()
	              			self.myChart.setOption(self.options)	
              			}
              			
              		} else {
              			self.options.yAxis[0].data = perMonthDep.thisMonth.personalTrend.xData
              			self.heightTest = (parseInt(self.options.yAxis[0].data.length)*45 +150) + 'px'
              			if (perMonthDep.thisMonth.personalTrend.yData.length == 0) {
              				self.departmentNone = true
              			} else {
	              			self.options.series[0].data = perMonthDep.thisMonth.personalTrend.yData
	              			self.options.series[0].name = "扣罚情况"
	              			self.options.series[0].label.show = true
	              			self.options.series[1].data = []
	              			self.options.series[2].data = []
	              			self.options.series[3].data = []
	              			self.options.legend.data = []
	              			for ( var i = 0 ; i < self.options.yAxis[0].data.length; i++ ) {
	              				self.options.series[3].data.push(1000)
	              			}
	              			self.myChart = echarts.init(self.$refs.list)
	              			setTimeout(() => self.myChart.resize(), 0)
	              			self.myChart.clear()
	              			self.myChart.setOption(self.options)	
              			}	
              		}
              		
					//绩效总额趋势
					self.optionsMenRightTop.xAxis[0].data = []
	           		perMonthDep.thisMonth.monthTrend.xData.forEach((item) => {
          				self.optionsMenRightTop.xAxis[0].data.push(item)
          			})
		            self.optionsMenRightTop.series[0].data = perMonthDep.thisMonth.monthTrend.yData
		            self.optionsMenRightTop.series[1].data = perMonthDep.samePeriod.monthTrend.yData
	    			self.myChart1 = echarts.init(self.$refs.jixiaoall)
					self.myChart1.setOption(self.optionsMenRightTop)
					//绩效构成
					self.optionsMenRightBottom.xAxis[0].data = perMonthDep.thisMonth.perTotalUnit.xData
					self.optionsMenRightBottom.series[0].data = perMonthDep.thisMonth.perTotalUnit.yData
					self.myChart2 = echarts.init(self.$refs.goucheng)
					self.myChart2.setOption(self.optionsMenRightBottom)
          		} else if (rep.data.statusCode === '10003'){
              	 	self.$router.push('/login')
              	}
          		
         	}).catch(function (error) {
          		// console.log(error);
         	});
         	// return perMonthDep
 		},
		backClick () {
			let depName = sessionStorage.getItem('depName')
			var type = ''
			var depId = ''
			this.departmentArr.forEach((item) => {
				if (item.name === depName) {
					type = item.type
					depId = item.id
				}
			})
			if (type === '临床服务') {
					this.$router.push('/section-service/' + depId)

			} else if (type === '医技医辅') {
				this.$router.push('/section-hospital/' + depId)
				 
			}else {
				this.$router.push('/section-analysis/' + depId)
			}
			// this.$router.push('/section-analysis/' + depId)
		},
		change (name) {
			var type = ''
			var id = ''
			this.getDepartment()
			this.departmentArr.forEach((item) => {
				if (item.name === name) {
					type = item.type
					id = item.id
				}
			})
			this.depId = id
			this.value = name
			sessionStorage.setItem('depName',name)
			// if (this.outShow == true) {
			// 	this.getperDepAnalyse('perTotalNum')
			// } else if (this.averageShow == true) {
			// 	this.getperDepAnalyse('averPeo')
			// } else {
			// 	this.getperDepAnalyse('penTotal')
			// }
		},
		option_click () {

		},
		barClick (type) {
			this.outShow = false
			this.averageShow = false
			this.useShow = false
			this.options.series[0].data = []
			this.options.series[1].data = []
			this.options.yAxis[0].data = []
			var self = this
			if (type === 'out') {
				this.outShow = true
				this.getperDepAnalyse('perTotalNum')
			} else if (type === 'average') {
				this.averageShow = true
				this.getperDepAnalyse('averPeo')
				// this.myChart = echarts.init(this.$refs.list)
				// this.myChart.setOption(this.options)
			} else {
				this.useShow = true
				this.getperDepAnalyse('penTotal')
				// this.myChart = echarts.init(this.$refs.list)
				// this.myChart.setOption(this.options)
			}
		},
	  refresh (isBtnRefresh) {      
	      
	    domMessage.innerHTML = '';  
		}
	},
	computed:{
		bgColor () {
			// const bgColor = ['active', 'active1', 'active2', 'active3', 'active4']
			// var bg;
			let bg = {}
			var bgColor = ''

			this.type === '门急诊情况'? bgColor = 'active' : this.type === '住院情况'? bgColor = 'active1' : this.type === '手术情况' ? bgColor = 'active2' : this.type === '药品使用情况' ? bgColor = 'active3' : this.type === '扣罚情况' ? bgColor = 'active4' : bgColor = 'active5'

			bg[bgColor] = true
			return bg
		}
	},
	mounted () {
		var self = this
		this.getDepartment()
		// this.depId = this.$store.state.department
		// this.getperDepAnalyse('perTotalNum')
		this.myChart = echarts.init(this.$refs.list)
		// this.myChart.setOption(this.options)

		// this.myChart1 = echarts.init(this.$refs.jixiaoall)
		// this.myChart1.setOption(this.optionsMenRightTop)

		// this.myChart2 = echarts.init(this.$refs.goucheng)
		// this.myChart2.setOption(this.optionsMenRightBottom)
		// var that = this
		// this.myChart.on('legendselected',function(params) {
		// 	alert(params.name)
		// })
		this.myChart.on('legendselectchanged', function(obj) {
			self.options.series[2].data = []
			if(obj.selected['本科室发放'] && obj.selected['非本科室发放']) {
				self.options.series[0].data.forEach((item,index) => {
      				let sum = parseFloat(self.options.series[0].data[index]) + parseFloat(self.options.series[1].data[index])
      				self.options.series[2].data.push(sum)
      			})
			} else if(obj.selected['本科室发放']) {
      				self.options.series[2].data = self.options.series[0].data
			} else if(obj.selected['非本科室发放']) {
      				self.options.series[2].data = self.options.series[1].data
			} else {
				self.options.series[0].data.forEach((item) => {
					self.options.series[2].data.push(0)
				})
			}
			self.myChart.setOption(self.options)
        // var selected = obj.selected;
        // var legend = obj.name;

        // // 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event，导致本函数重复运行
        // // 使得 无 selected 对象
        // if (selected != undefined) {

        //     if (isFirstUnSelect(selected)) {
        //         triggerAction('legendToggleSelect', selected);
        //     } else if (isAllUnSelected(selected)) {
        //         triggerAction('legendSelect', selected);

        //     }
        // }

    });
		//bar的点击事件
		this.myChart.on("click", function (params) {
			var userId = self.personalIds[params.dataIndex]
			var length = self.options.yAxis[0].data.length
			var qs = require('qs')
			var index = params.dataIndex;
	  		var myChart = echarts.init(self.$refs.list)
	  		if ( self.useShow == true ) {
	  			for(var i = 0 ; i < self.options.yAxis[0].data.length ; i++){
		           	if(self.options.series[0].data[i].value){
		                self.options.series[0].data[i] = self.options.series[0].data[i].value;
		            }
			        if(index == i){
			            self.options.series[0].data[i] = {
			                value : self.options.series[0].data[i],
			                itemStyle:{
			                    normal:{
			                        color : '#4F97E2'
			                    }
			                }
			            }
			        }
			    }
	  		} else {
		  		for(var i = 0 ; i < self.options.yAxis[0].data.length ; i++){
		           	if(self.options.series[0].data[i].value){
		                self.options.series[0].data[i] = self.options.series[0].data[i].value;
		            }
		            if(self.options.series[1].data[i].value){
		                self.options.series[1].data[i] = self.options.series[1].data[i].value;
		            }
		            if(self.options.series[2].data[i].value){
		                self.options.series[2].data[i] = self.options.series[2].data[i].value;
		            }
			        if(index == i){
			            self.options.series[0].data[i] = {
			                value : self.options.series[0].data[i],
			                itemStyle:{
			                    normal:{
			                        color : '#4F97E2'
			                    }
			                }
			            }
			            self.options.series[1].data[i] = {
			                value : self.options.series[1].data[i],
			                itemStyle:{
			                    normal:{
			                        color : '#ECBE6A'
			                    }
			                }
			            }
			        }
			    }	
	  		}
	  		
	  	
	  		
		    myChart.setOption(self.options)
			axios.post('/service', 
          		qs.stringify({"data": JSON.stringify({
              		command: 'perMonthUserTrend',
              		platform: 'web',
              		monthTime: self.month,
              		id: userId
             		})
          		}), {
              		headers: {
               			"BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
              		}
            }).then(function (rep) {
				let perMonthUser = rep.data.data.perMonthUser
				self.optionsMenRightBottom.xAxis[0].data = perMonthUser.thisMonth.perUnit.xData
				self.optionsMenRightBottom.series[0].data = perMonthUser.thisMonth.perUnit.yData
				self.myChart2 = echarts.init(self.$refs.goucheng)
				self.myChart2.setOption(self.optionsMenRightBottom)
				// self.optionsMenRightTop.xAxis[0].data = perMonthUser.thisMonth.perUnit.xData
	   //          self.optionsMenRightTop.series[0].data = perMonthUser.thisMonth.perUnit.yData
    // 			self.myChart1 = echarts.init(self.$refs.jixiaoall)
				// self.myChart1.setOption(self.optionsMenRightTop)
	        })
	})
	},
	created () {
		// alert(this.month)
		// this.depId = this.$store.state.department
		// this.value = this.depId
		
		this.heightClient = document.body.clientHeight - 170 + 'px'
		this.a = false
		this.a = true
	},
	props: ['month'],
	watch: {
		month (newV, oldV) {
			this.month = newV
			this.depId = this.$store.state.department
			this.value = this.depId
			// this.getperDepAnalyse('perTotalNum')
			this.getDepartment()
			this.heightClient = document.body.clientHeight - 170 + 'px'
			this.a = false
			this.a = true
		}
	}
}
</script>
<style lang="scss" scoped>
	header{
		height: 63px;
		background: #fff;
		line-height: 63px;
		padding-left: 130px;
		font-size: 16px;
		.div{
			margin: 0 auto;
			float: right;
			margin-right: 45%;
		}
		span:nth-child(1){
			color: #989898;
			margin-right: 40px;
			cursor: pointer;
		}
		span:nth-child(1):hover{
			color: #85C8FD;
		}
		span:nth-child(2){
			color: #686868;
		}
	}
	.detail_container{
		// min-height: 850px;
		background: #f8f8f8;
		padding: 30px 3%;

		.side_choose{
			width: 38%;
			background: #fff;
			margin-right: 2%;
			height: 98%;
			box-shadow: 0 2px 8px 0 rgba(0,0,0,0.17);
			float: left;
			.side_title{
				line-height: 45px;
				font-size: 16px;
				color: #646464;
				text-indent: 20px;
				border-bottom: 1px solid #ccc;
			}
			.choose_bar{
				height: 155px;
				padding-left: 2%;
				padding-right: 2%;
				width: 96%;
				.active{
					background: #5396DE !important;
					box-shadow: 0 2px 12px 0 rgba(83,150,222,0.50);
					border-radius: 5px;
					color: #fff !important;
					span{
						color: #fff !important;
					}
				}
				.bar{
					width: 28%;
					padding: 10px 2%;
					height: 67px;
					line-height: 20px;
					margin-top: 24px;
					border-radius: 5px;
					background: #f1f1f1;
					float: left;
					margin-right: 2%;
					cursor: pointer;
					font-size: 13px;
					color: #787878;
					.bar-list{
						// float: left;
						width: 100%;
						margin-right: 7%;
						margin-left: 3%;
						span:nth-child(1){
							line-height: 28px;
						}
						span {
							font-family: '微软雅黑,PingFangSC'
						}
						
					}
					.spe{
						span:nth-child(1){
							font-size: 18px;
							color: #4D4D4D;
							line-height: 28px;
						}	
					}
				}
				.bar:last-child{
					margin-right: 0;
				}
				.bar:hover{
					background-color: #79B5F5  !important;
					color:#fff !important;
					border-radius: 5px;
					.bar-list{
						span:nth-child(1){
							color:#fff;
						}
					}
				}
			}
		}
		.container_right{
			float: left;
			width: 60%;
			height: 100%;
			.koufa {
				width: 30%;
				float: left;
				background: #fff;
				height: 40%;
				box-shadow: 0 2px 8px 0 rgba(0,0,0,0.17);
				ul{
					display: flex;
					padding: 5px 0;
					text-align: center;
					li{
						width: 33%;
						border-right: 1px solid #ccc;
						span:first-child{
							font-size: 22px;
							line-height: 30px;
							color: #4D4D4D; 
						}
						span:last-child{
							font-size: 12px;
							color: #9B9B9B;
						}
					}
					li:last-child{
						border-right: 0px !important;
					}
				}
			}
			.koutwo{
				ul {
					li {
						width: 49.5% !important;
					}
				}
			}
			.right_title{
				height: 43px;
				line-height: 43px;
				padding-left: 22px;
				font-size: 17px;
				color: #4D4D4D;
				border-bottom: 1px solid #ddd;
				.smtitle{
					font-size: 14px;
					color: #9B9B9B;
				}
			}
			.right_content{
				display: flex;
				width: 100%;
				align-items: center;
				justify-content: center;
				height: calc(100% - 45px);
				ul{
					width: 70%;
					height: 150px;
					align-items: center;
					justify-content: center;
					li{
						height: 40px;
						line-height: 40px;
						margin-top: 10px;
						color: #787878;
						span{
							font-size: 24px;
							color: #4D4D4D;
							display: inline-block;
						}
					}
				}
			}
			.right_top{
				background: #fff;
				box-shadow: 0 2px 8px 0 rgba(0,0,0,0.17);
			}
			.right_top, .right_bottom{
				height: 48%;
				margin-bottom: 2%;
				box-shadow: 0 2px 8px 0 rgba(0,0,0,0.17);
			}
		}
	}
</style>